<template>
  <div class="home" v-if="homeNavList">
    <van-tabs
      @change="onChange"
      v-model="active"
      sticky
      swipeable
      v-if="homeNavList.length"
    >
      <van-tab
        v-for="(item, index) in homeNavList"
        :key="index"
        :title="item.title"
      >
        <div class="classify">
          <i class="iconfont icon-fenlei1" @click="show = !show"></i>
          <i class="iconfont icon-pinglun"></i>
        </div>
        <div class="homebox" v-if="needData.length">
          <lazy-component
            v-for="(item, index) in needData"
            :key="index"
            class="box"
            :class="{ mdcard: item.type == 'uiMiddleCard' }"
          >
            <mTitle :item="item" v-if="item.type == 'mTitle'"></mTitle>
            <uiBigCard
              class="bigcard"
              ref="bigcard"
              :index="index"
              :item="item"
              v-if="
                item.type == 'uiBigCard' && item.children[0].type == 'mArticle'
              "
            ></uiBigCard>
            <mBanner v-if="item.type == 'uiBanner'" :item="item"></mBanner>
            <uiMiddleCard
              v-if="item.type == 'uiMiddleCard'"
              class="carditem"
              :item="item"
            ></uiMiddleCard>
            <mAdverti
              class="mAdverti"
              v-if="
                item.type == 'uiBigCard' &&
                item.children[0].type == 'mAdvertisement'
              "
              :item="item"
            ></mAdverti>
            <uiBigCardTop
              class="cardtop"
              v-if="item.type == 'uiBigCardTop'"
              :item="item"
            ></uiBigCardTop>
            <CollectionSlide
              class="CollectionSlide"
              v-if="item.type == 'uiCollectionSlideOne'"
              :item="item.children"
            ></CollectionSlide>
            <mFunction
              class="mfunction"
              :item="item"
              v-if="item.type == 'uiFunction'"
            ></mFunction>
          </lazy-component>
        </div>
        <MyLoading v-else></MyLoading>
      </van-tab>
    </van-tabs>
    <van-popup
      class="mypopup"
      v-model="show"
      round
      position="bottom"
      :style="{ background: '#f7f7f7', height: '90%' }"
    >
      <van-nav-bar class="mynavbar">
        <template #left>
          <i class="iconfont icon-shanchu" @click="show = false"></i>
        </template>
        <template #title>
          <span class="title">分类</span>
        </template>
        <template #right>
          <span class="edit" @click="edit = !edit" v-if="!edit">编辑</span>
          <span class="edit" @click="ended" v-else>完成</span>
        </template>
      </van-nav-bar>
      <div class="myclassify">
        <p>我的分类 &nbsp;&nbsp;<span>点击进入分类</span></p>
        <div class="itembox">
          <div
            @click="onChange(index)"
            class="item"
            v-for="(i, index) in homeNavList"
            :key="index"
            :class="{ active: edit }"
          >
            {{ i.title }}
            <i v-if="edit && index > 3" class="sub iconfont icon-jian"></i>
          </div>
        </div>
        <p>
          更多分类 &nbsp;&nbsp;<span v-if="moreNavList.length == 0"
            >暂无更多分类</span
          >
        </p>
        <div class="itembox">
          <div
            @click="addNav(index)"
            class="item"
            v-for="(i, index) in moreNavList"
            :key="index"
          >
            {{ i.title }}
            <i v-if="edit" class="add iconfont icon-tianjia"></i>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
  <MyLoading v-else></MyLoading>
</template>

<script>
import Vue from "vue";
import mTitle from "@/components/mTitle.vue";
import uiBigCard from "@/components/uiBigCard.vue";
import mBanner from "@/components/mBanner.vue";
import uiMiddleCard from "@/components/uiMiddleCard.vue";
import mAdverti from "@/components/mAdverti.vue";
import uiBigCardTop from "@/components/uiCardTop.vue";
import CollectionSlide from "@/components/CollectionSlide.vue";
import mFunction from "@/components/mFunction.vue";
import MyLoading from "@/components/MyLoading.vue";
import { NavBar } from "vant";
import { Popup } from "vant";

Vue.use(NavBar);
Vue.use(Popup);
import { Lazyload } from "vant";
Vue.use(Lazyload, {
  lazyComponent: true,
});
export default {
  data() {
    return {
      rout: "",
      playindex: null,
      active: 1,
      show: false,
      homeNavList: [],
      needData: [],
      moreNavList: [],
      edit: false,
    };
  },
  components: {
    mTitle,
    uiBigCard,
    mBanner,
    uiMiddleCard,
    mAdverti,
    uiBigCardTop,
    CollectionSlide,
    mFunction,
    MyLoading,
  },
  created: function () {
    this.active = JSON.parse(window.localStorage.getItem('active'))*1||1
    this.needData = [];
    if (window.localStorage.getItem("homeNavList")) {
      this.homeNavList = JSON.parse(window.localStorage.getItem("homeNavList"));
      this.moreNavList = JSON.parse(window.localStorage.getItem("moreNavList"))||[];
      this.axios
        .get(
          "https://apis.netstart.cn/xpc" + this.homeNavList[this.active].link
        )
        .then((res) => {
          this.needData = res.data.data.children;
        });
    } else {
      this.axios.get("https://apis.netstart.cn/xpc/home/config").then((res) => {
        this.homeNavList = res.data.data.tab;
        this.homeNavList = this.homeNavList.filter((i) => i.type !== "feed");
        this.axios
          .get(
            "https://apis.netstart.cn/xpc" + this.homeNavList[this.active].link
          )
          .then((res) => {
            this.needData = res.data.data.children;
          });
      });
    }
  },
  methods: {
    ended() {
      this.edit = !this.edit;
      window.localStorage.setItem(
        "homeNavList",
        JSON.stringify(this.homeNavList)
      );
      window.localStorage.setItem(
        "moreNavList",
        JSON.stringify(this.moreNavList)
      );
      location.reload();
    },
    onChange(index) {
      console.log(index);
      window.localStorage.setItem('active',index)
      if (!this.edit) {
        this.active = index;
        this.show = false;
        this.needData = [];
        this.axios
          .get("https://apis.netstart.cn/xpc" + this.homeNavList[index].link)
          .then((res) => {
            this.needData = res.data.data.children;
          });
      } else if (index > 3) {
        var k = this.homeNavList.splice(index, 1);
        this.moreNavList.push(k[0]);
      }
    },
    addNav(index) {
      this.edit = true;
      var k = this.moreNavList.splice(index, 1);
      this.homeNavList.push(k[0]);
    },
  },
};
</script>


<style lang="less" scoped>
.home {
  width: 100vw;
  /deep/.van-sticky {
    .van-tabs__wrap {
      .van-tabs__nav--line {
        padding-right: 90px !important;
      }
    }
  }
  background-color: #f7f7f7;
  .classify {
    width: 120px;
    display: flex;
    align-items: center;
    z-index: 99;
    justify-content: space-between;
    position: fixed;
    padding: 0 10px;
    padding-left: 40px;
    height: 44px;
    top: 0;
    right: 0;
    background-image: linear-gradient(to right, transparent 0%, white 30%);
    i {
      font-size: 28px;
      font-weight: 800;
      &:first-child {
        font-weight: 580;
      }
    }
  }
  .homebox {
    width: 100vw;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding-bottom: 60px;
    .box {
      display: inline-block;
      width: 100%;
      height: 100%;
      &.mdcard {
        width: 46%;
        display: flex;
        justify-content: center;
      }
      .cardtop {
        width: 96%;
        min-height: 300px;
        margin: 0 auto;
        margin-bottom: 10px;
      }
      .bigcard {
        width: 96%;
        margin: 0 auto;
        margin-bottom: 10px;
        position: relative;
      }
      .mAdverti {
        width: 96%;
        min-height: 300px;
        margin: 0 auto;
        margin-bottom: 10px;
      }
      .CollectionSlide {
        width: 96%;
        min-height: 230px;
        margin: 0 auto;
        margin-bottom: 10px;
      }
      .mfunction {
        width: 100%;
        min-height: 100px;
      }
      .carditem {
        width: 100%;
        height: 200px;
        margin-bottom: 10px;

        i {
          width: 100%;
          height: 50%;
        }
      }
    }
  }
  .homeInNav {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 60px;
    overflow-x: auto;
    background-color: #fff;
    display: flex;
    align-items: center;
    &::-webkit-scrollbar {
      display: none;
    }
    a {
      margin: 0 20px;
      flex-shrink: 0;
      color: #bcbcbc;
      text-decoration: none;
      &.router-link-exact-active {
        color: #000;
      }
    }
  }
  .mypopup {
    .mynavbar {
      i {
        font-size: 18px;
        font-weight: 600;
      }
      .title {
        font-weight: 600;
        font-size: 17px;
      }
      .edit {
        color: #ba0028;
        font-size: 12px;
      }
    }
    .myclassify {
      padding: 0 20px;
      p {
        font-size: 18px;
        font-weight: 600;
        margin: 20px 0px;
        span {
          font-size: 12px;
          color: #aaa;
          font-weight: 500;
        }
      }
      .itembox {
        display: flex;
        flex-wrap: wrap;
        .item {
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 5px;
          flex-shrink: 0;
          width: 105px;
          height: 48px;
          background-color: #e0e0e0;
          color: #515151;
          margin-bottom: 10px;
          margin-right: 10px;
          position: relative;
          &.active {
            &:nth-child(-n + 4) {
              color: #aaa;
            }
          }
          &:nth-child(3n) {
            margin-right: 0;
          }
          i {
            font-weight: 600;
            &.add {
              color: #ba0028;
              position: absolute;
              top: 0px;
              right: 5px;
            }
            &.sub {
              color: #515151;
              position: absolute;
              top: 5px;
              right: 5px;
            }
          }
        }
      }
    }
  }
}
</style>